<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.number" placeholder="采购编号" style="width: 170px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="具体车型" style="width: 170px; margin-left:10px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="VIN码" style="width: 170px;margin-left:10px;"></el-input>
        
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:10px;">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="采购编号">
        <template slot-scope="scope">
          <span>{{ scope.row.buynumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="付款日期">
        <template slot-scope="scope">
          <span>{{ scope.row.buydate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.car }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="VIN码">
        <template slot-scope="scope">
          <span>{{ scope.row.vincode }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="销售状态">
        <template slot-scope="scope">
          <span>{{ scope.row.financemoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="返利项目">
        <template slot-scope="scope">
          <span>{{ scope.row.financecompany }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作"  width="420" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().billing(scope.row.id)">开票</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().rebate(scope.row.id)">返利</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().rebatecomplete(scope.row.id)">确认返利结束</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().details(scope.row.id)">详情</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

<!-- 开票 -->
<el-dialog :title="dialogBilling.title" :visible.sync="dialogBilling.visible"  width="700px">
    <div class="ci">
        <div class="bill" ref="dialogBillingBill">
            <div class="item">1、摘要：支付******供应商车款 已支付</div>
            <div class="item">2、科目：</div>
            <div class="item">借1：113200n 预付账款-***单位  金额=23409.00元</div>
            <div class="item">贷1：113300n 中国银行 36月按揭贷款 金额=360000.00元</div>
            <div class="item">贷2：融资支付 210100n 金额=360000.00元</div>
            <div class="item">贷3：厂家返利支付， 1133 单位：**** 金额=360000.00元</div>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBilling.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogBillingClick().print()" :loading="dialogBilling.saveloading">打 印</el-button>
        <el-button type="primary" @click="dialogBillingClick().save()" :loading="dialogBilling.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 开票 -->

<!-- 赎证 -->
<el-dialog :title="dialogRedempte.title" :visible.sync="dialogRedempte.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name">融资金额</span>
            <span class="value"></span>
        </div>
        <div class="item">
            <span class="name">产生利息</span>
            <span class="value"></span>
        </div>
        <div class="item">
            <span class="name">合计赎证费用</span>
            <span class="value"></span>
        </div>
        <div class="item">
            <span class="name">发票类型</span>
            <span class="value">
                <el-select v-model="dialogRedempte.data.billtype" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.billtype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name">金额</span>
            <span class="value">
                <el-input v-model="dialogRedempte.data.money"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">税额</span>
            <span class="value">
                <el-input v-model="dialogRedempte.data.tax"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">付款方式</span>
            <span class="value">
                <el-select v-model="dialogRedempte.data.paytype" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.paytype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="dialogRedempte.data.bank"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRedempte.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogRedempteClick().save()" :loading="dialogRedempte.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 赎证 -->

  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as vehicleApi from '@/api/finance/vehicle'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Print from '@/utils/print'


export default {
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        number:'',
      },
      selectOptions:{
          billtype:[],
          paytype:[
              {label:'现金',value:'1'},
              {label:'银行',value:'2'},
          ]
      },
      search:{
        number:'',
      },
      dialogBilling:{
          visible:false,
          saveloading:false,
          title:'开票',
          data:{

          }
      },
      dialogRedempte:{
          visible:false,
          saveloading:false,
          title:'赎证',
          data:{

          }
      }
    }
  },
  created(){
      var that=this;
      that.searchClick();
  },
  mounted(){

  },
  filters:{
    parseSettleType(val){
       return ['','收益','提现'][val];
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      
      vehicleApi.getRedempteCertList(that.listQuery).then(res=>{
         if(res.data && res.data.items){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.number=that.search.number.trim();
      that.getList();
    },
    tableRowClick(){
        var that=this;
        return {
           billing(id){
               that.dialogBilling.visible=true;
           },
           redempte(id) {
               that.dialogRedempte.visible=true;
           },
           details(id){

           }
        }
    },
    dialogBillingClick(){
        var that=this;
        var printHandle=null;
        return {
            save(){

            },
            print(){
                if(!printHandle){
                    printHandle=new Print(that.$refs['dialogBillingBill']);
                }
                printHandle.Start();
            }
        }
    },
    dialogRedempteClick(){
        var that=this;
        var dg=that.dialogRedempte;
        return {
            save(){
                dg.visible=false;
            }
        }
    }
    
  }
}
</script>
<style scoped>

</style>
